<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>运营分析-油品分析-鹿程智慧油站商户平台</title>
		<meta name="description" content="鹿程科技是提供加油站互联网化零管系统、营销及支付和大数据分析运营服务的行业领先科技公司。鹿程科技充分了解加油站行业的需求和新兴互联网的发展,依靠业内最先进的科技和标准化的运营,持续帮助油站业务发展创造价值。"/>
		<meta name="keywords" content="智慧油站,鹿程,鹿程智慧油站,鹿程智慧油站微信支付,加油站微信支付,加油站营销管理"/>
		<link rel="icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link rel="shortcut icon" href="https://static.zhihuiyouzhan.com.cn/static/styles/admin/img/title.ico" type="image/x-icon">
		<link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
		<link rel="stylesheet" href="../layui/css/layui.css" />
		<link rel="stylesheet" href="../css/style.css" />
	</head>
<body>
	<section class="section-right">
		<!--deer-tit-->
		<div class="deer-tit">
			<h3>运营分析</h3>
			<h4>油品分析</h4>
		</div>
		<!--/deer-tit-->
		<!--deer-content-->
		<div class="deer-content">
			<div class="gas-border">
				<nav class="gas-nav">
					<dl trend="sale">销量趋势</dl>
					<dl trend="per">客单价趋势</dl>
				</nav>
				<form class="marketing-found layui-form biz-checkboxes-form" id="form" method="post" action="">
				<dl>
                <dt>油品类型：</dt>
                <dd class="oil">
                    <input type="checkbox" name="num1"  title="不限"  lay-skin="primary" lay-filter="checked1" checked>
                    <input type="checkbox"  value="1" name="oil[]" lay-skin="primary" title='0#(升)'>
                    <input type="checkbox"  value="60" name="oil[]" lay-skin="primary" title='92#(升)'>
                    <input type="checkbox"  value="72" name="oil[]" lay-skin="primary" title='95#(升)'>
                    <input type="checkbox"  value="72" name="oil[]" lay-skin="primary" title='98#(升)'>
                </dd>
				</dl>
				<dl>
					<dt>支付类型：</dt>					
					<dd class="pay">
	                    <input type="checkbox" name="num2"  title="不限" lay-skin="primary" lay-filter="checked2" checked>
	                    <input type="checkbox"  value="71" name="pay[]" lay-skin="primary" title='现金'>
	                    <input type="checkbox"  value="60" name="pay[]" lay-skin="primary" title='银行卡'>
	                    <input type="checkbox"  value="72" name="pay[]" lay-skin="primary" title='微信'>
	                    <input type="checkbox"  value="72" name="pay[]" lay-skin="primary" title='卡共享'>
	                    <input type="checkbox"  value="72" name="pay[]" lay-skin="primary" title='混合'>
	                    <input type="checkbox"  value="72" name="pay[]" lay-skin="primary" title='云端卡'>
	                    <input type="checkbox"  value="72" name="pay[]" lay-skin="primary" title='未知'>
	                    <input type="checkbox"  value="72" name="pay[]" lay-skin="primary" title='加油卡卡账'>
                	</dd>
				</dl>
				<dl>
					<dt>图表：</dt>					
					<dd class="chart">
	                    <input type="checkbox" name="num3"  title="不限"lay-skin="primary" lay-filter="checked3" checked>
	                    <input  type="checkbox" value="2" name="chart[]" lay-skin="primary" title="油品堆叠">
	                    <input  type="checkbox" value="3" name="chart[]" lay-skin="primary" title="储值卡（APP）">
           			</dd>
				</dl>
				<dl>
					<dt>单位：</dt>
		            <dd class="unit">
		                <input type="checkbox" name="num4"  lay-skin="primary" title="不限" lay-filter="checked4" checked>
		                <input type="checkbox"  value="1" name="unit[]" lay-skin="primary" title='升数'>
		                <input type="checkbox"  value="2" name="unit[]" lay-skin="primary" title='笔数'>
		                <input type="checkbox"  value="3" name="unit[]" lay-skin="primary" title='金额'>
		            </dd>
				</dl>
				<dl>
					<dt>时间维度:</dt>
					<dd style="padding: 0;border: 0;">
					   	<select name="data" lay-filter="data">
					        <option value="1">日</option>
	                        <option value="2">月</option>
	                        <option value="3">年</option>
				   		</select>
					</dd>
				</dl>
				<dl>
					<dt>查询时间:</dt>
					<dd>
						<input  class="biz-time active" type="text" placeholder="时间" id="time_day" value="">
						<input  class="biz-time noact" type="text" placeholder="时间" id="time_month" value="">
						<input  class="biz-time noact" type="text" placeholder="时间" id="time_year" value="">
					</dd>
				</dl>
				<dl class="clearfix " style="margin-left: 120px;">				
					<div class="order-nav-search">
						<dl>
							<button class="deer-btn">一键对比</button>
							<button class="deer-btn" lay-submit lay-filter="*">查询</button>
	            			<button class="deer-btns" type="reset">复位</button>
						</dl>            		
	            	</div>            		
            	</dl>
			</form>
				
				<div class="gas-store">
					<h4></h4>
					<div class="gas-echarts-store" id="main"></div>
				</div>
				<div class="gas-store">
					<h4>销量趋势</h4>
					<div class="export-key"><a class="educe">数据导出</a></div>
					<table class="layui-table" lay-skin="line">
						
			  	<thead>
			  		<tr style="background-color: #ffffff;">
				      	<td colspan="6">油品类型：全部；支付类型：全部；</td>
				    </tr> 
				    <tr>
				      	<th>时间</th>
				        <th>0#(升)</th>
				        <th>92#(升)</th>
				        <th>95#(升)</th>
				        <th>98#(升)</th>
				        <th>合计(升)</th>
				       
				    </tr> 
			  	</thead>
			  	<tbody>
			  		<tr>
			  			<td>2018-04-10</td>
			  			<td>588.9</td>
			  			<td>999.5</td>
			  			<td>728.45</td>
			  			<td>200</td>
			  			<td>2500</td>
			  		</tr>
			  		<tr>
			  			<td>2018-04-11</td>
			  			<td>588.9</td>
			  			<td>999.5</td>
			  			<td>728.45</td>
			  			<td>200</td>
			  			<td>2500</td>
			  		</tr>
			  		<tr>
			  			<td>2018-04-12</td>
			  			<td>588.9</td>
			  			<td>999.5</td>
			  			<td>728.45</td>
			  			<td>200</td>
			  			<td>2500</td>
			  		</tr>
			  		<tr>
			  			<td>2018-04-13</td>
			  			<td>588.9</td>
			  			<td>999.5</td>
			  			<td>728.45</td>
			  			<td>200</td>
			  			<td>2500</td>
			  		</tr>
			  		<tr>
			  			<td>2018-04-14</td>
			  			<td>588.9</td>
			  			<td>999.5</td>
			  			<td>728.45</td>
			  			<td>200</td>
			  			<td>2500</td>
			  		</tr>
			  		<tr>
			  			<td>2018-04-15</td>
			  			<td>588.9</td>
			  			<td>999.5</td>
			  			<td>728.45</td>
			  			<td>200</td>
			  			<td>2500</td>
			  		</tr>
			  	</tbody>
			</table>
				</div>
			</div>
		</div>
		<!--/deer-content-->
	</section>
	<!--js-->
		<aside>
			<script type="text/javascript" src="../layui/layui.js" ></script>
			<script type="text/javascript" src="../js/echarts.min.js" ></script>
			<script type="text/javascript">
				layui.use(['laydate','jquery','form'],function(){
					var $=layui.jquery
					var	form=layui.form;
					var laydate=layui.laydate;
						laydate.render({
						        elem: '#time_day', //指定元素
						        max:0,
						        range: '至',
				    	});
				    	laydate.render({
						        elem: '#time_month', //指定元素
						        type:'month'
						       
				    	});
				    	laydate.render({
						        elem: '#time_year', //指定元素
						        type:'year'
						       
				    	});
				    //gas-nav样式切换
				    $('.gas-nav dl').eq(0).addClass('active').siblings().removeClass('active')
				    $('.gas-nav dl').bind('click',function(){
				    	//$(this).addClass('active').siblings().removeClass('active')				    	
				    })
				    
				    //日期选择监听
					form.on('select(data)', function(data){
						if(data.value == "1"){
							$("#time_day").addClass("active").removeClass("noact").siblings().addClass("noact");
						}
						if(data.value == "2"){
							$("#time_month").addClass("active").removeClass("noact").siblings().addClass("noact");
						}
						if(data.value == "3"){
							$("#time_year").addClass("active").removeClass("noact").siblings().addClass("noact");
						}
					  
					}); 
				    
				    //全选
					form.on('checkbox(checked1)', function(data){
		                checkeds(data)
		            });
					checkedAlls($('.oil'))

					form.on('checkbox(checked2)', function(data){
		                checkeds(data)
		            });
            		checkedAlls($('.pay'))            
		           form.on('checkbox(checked3)', function(data){
		                checkeds(data)
		            });
            		checkedAlls($('.chart'))  
            		form.on('checkbox(checked4)', function(data){
		                checkeds(data)
		            });
            		checkedAlls($('.unit'))  
            		//判断是否全选
		            function checkeds(data){
		                var checkDiv=$(data.elem).parent().children('.layui-form-checkbox')
		                var checked=$(data.elem).parent().children(':checkbox')
		                if($(data.othis).hasClass('layui-form-checked')){
		                	checkDiv.removeClass('layui-form-checked')
		                    checked.each(function(index,value){
		                        value.checked = data.elem.checked;
		                    })                    
		                }else{
		                	checkDiv.removeClass('layui-form-checked');                	
		                    checked.each(function(index,value){
		                        value.checked = false;
		                    })
		                	$(data.othis).addClass('layui-form-checked');                   
		                }
		            }
					//全选判断
		            function checkedAlls(all){
		            	var nums=0
						all.on('click','.layui-form-checkbox:gt(0)',function () {
							var num=0
							all.find('.layui-form-checkbox:gt(0)').each(function(index,value){
								if($(value).hasClass('layui-form-checked')==false){
									num++
								}
							})
							if(num){
									all.find('.layui-form-checkbox').eq(0).removeClass('layui-form-checked')
											
							}else{
								all.find('.layui-form-checkbox').eq(0).addClass('layui-form-checked');
								//all.find('.layui-form-checkbox:gt(0)').removeClass('layui-form-checked');
							}
						})
						
							all.find('.layui-form-checkbox:gt(0)').each(function(index,value){
								if($(value).hasClass('layui-form-checked')==false){
									nums++
								}
							})
							if(nums){
								all.find('.layui-form-checkbox').eq(0).addClass('layui-form-checked')
							}else{
								all.find('.layui-form-checkbox').eq(0).removeClass('layui-form-checked')
								all.find('.layui-form-checkbox:gt(0)').removeClass('layui-form-checked');
								
							}
						
					}
				})
				
		       // 基于准备好的dom，初始化echarts实例
		        var myChart = echarts.init(document.getElementById('main'));
		
		        // 指定图表的配置项和数据
		        var xAxisData = [];
		        var data1 = [];
		        var data2 = [];
		        var data3 = [];
		        var data4 = [];
		        var d = [ '2018-04-10', '2018-04-11', '2018-04-12','2018-04-13', '2018-04-14', '2018-04-15','2018-04-16'];
		
		        for (var i = 0; i < 7; i++) {
		            xAxisData.push('' + d[i]);
		            data1.push((Math.random() * 2).toFixed(2));
		            data2.push(-Math.random().toFixed(2));
		            data3.push((Math.random() * 5).toFixed(2));
		            data4.push((Math.random() + 0.3).toFixed(2));
		        }
		
		        var itemStyle = {
		            normal: {
		            },
		
		        };
		
		        option = {
		
		            legend: {
		                data: ['0#','92#','95#','98#'],
		                align: 'left'
		            },
		
		        tooltip: {},
		            xAxis: {
		                data: xAxisData,
		            },
		            yAxis: {
		                name: '笔数',
		            },
				 toolbox: {
				        show: true,
				        orient: 'horizontal',
				        left: 'right',
				        top: 'top',
				        feature: {
				            mark: {show: true},
				            dataView: {show: true, readOnly: false},
				            magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
				            restore: {show: true},
				            saveAsImage: {show: true}
				        }
				    },
		
		            series: [
		
		                {
		                    name: '0#',
		                    type: 'bar',
		                    stack: 'two',
		                    itemStyle: itemStyle,
		                    data: data3
		                },
		                {
		                    name: '92#',
		                    type: 'bar',
		                    stack: 'two',
		                    itemStyle: itemStyle,
		                    data: data4
		                },
		                {
		                    name: '95#',
		                    type: 'bar',
		                    stack: 'two',
		                    itemStyle: itemStyle,
		                    data: data3
		                },
		                {
		                    name: '98#',
		                    type: 'bar',
		                    stack: 'two',
		                    itemStyle: itemStyle,
		                    data: data3
		                }
		                
		            ]
		        };
		
		        // 使用刚指定的配置项和数据显示图表。
		        myChart.setOption(option);
			</script>
		</aside>
		<!--/js-->
	
	
	
	
	
	
	
	
	
	
</body>
</html>